<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="02_unbindMethod.js"></script>
<style>
html * {
	margin: 0;
	padding: 0;
}

#box {
	width: 200px;
	height: 200px;
	border: 2px solid blue;
	margin-left: 30px;
	margin-top: 20px;
	background-color: blue;
}

#box.mouseover {
	background-color: red;
}

#box.mouseout {
	background-color: green;
}

#box.mousedown {
	background-color: purple;
}

#box.mouseup {
	background-color: #FF9C00;
}

#box>p {
	padding: 30px;
	color: white;
}
</style>

<input id="btn1" type="button" value="mouseout 이벤트 제거" />
<input id="btn2" type="button" value="모든 이벤트 제거" />
<div id="box" class="out">
	<p>mouseout</p>
</div>
